var AttendanceTable = function () {
  var tableConfigs = [{
    name: '车间人数',
    field: 'workshopPresonNum'
  }, {
    name: '上班人数',
    field: 'todayOndutyPersonNum'
  }, {
    name: '迟到人数',
    field: 'latePresonNum'
  }, {
    name: '早退人数',
    field: 'earlyPresonNum'
  }, {
    name: '请假人数',
    field: 'leavePresonNum'
  }, {
    name: '旷工人数',
    field: 'absentPresonNum'
  }];

  var template = /* html */ `
    <div class="attendance-table">
      <slot></slot>
      <div ref="attendanceContent" class="attendance-table-content">
        <table ref="attendanceTable" cellspacing="0" cellpadding="0" :style="getTableStyle()">
          <thead>
            <tr>
              <td>部门-车间</td>
              <td v-for="config in configs" :key="config.field">
                {{config.name}}
              </td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="attendance in attendanceList" :key="attendance.deptWork" :class="{'odd':attendance.rowIndex%2!==0}">
              <td>{{attendance['deptWork']}}</td>
              <td v-for="config in configs" :key="config.field" :class="getRowClassName(attendance,config)">
                {{attendance[config.field]}}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  `;

  return {
    mixins: [boardRunningMixin],

    watch: {
      changeData: function (newData, oldData) {
        if (newData.attendances !== oldData.attendances) {
          if (newData.rowIndex <= newData.attendances.length) {
            this.rowIndex = 0;
            return;
          }
        }

        this.resetTable();
      },

      zoom: function () {
        this.clearTimeoutList();
        var self = this;
        this.$nextTick(function(){
          self.changeRowIndex(true);
          self.changeColIndex(true);
        });
        this.boardRunning();
      }
    },

    computed: {
      changeData: function () {
        return {
          attendances: this.attendances,
          rowIndex: this.rowIndex,
          colIndex: this.colIndex
        }
      }
    },

    props: {
      attendances: {
        type: Array,
        required: true
      },
      data:{
        type: Object,
        required: true
      },
      zoom: {
        type: Number,
        default: 1
      }
    },

    data: function () {
      return {
        rowIndex: 0,
        colIndex: 0,
        attendanceList: this.attendances,
        configs: tableConfigs
      };
    },

    mounted: function () {
      this.boardRunning();

      var self = this;
      $(this.$el).resize(function () {
        self.clearTimeoutList();
        self.changeRowIndex(true);
        self.changeColIndex(true);
        self.boardRunning();
      });
    },

    methods: {
      boardRunning: function () {
        this.clearTimeoutList();
        this.tableRunning();
      },

      tableRunning: function () {
        var self = this;
        var timeout = setTimeout(function () {
          self.changeRowIndex();
          self.changeColIndex();
          self.tableRunning();
        }, 5000);
        this.timeoutList[0] = timeout;
      },

      changeRowIndex: function (hasResize) {
        var totalHeight = $(this.$refs['attendanceContent']).height();
        var tableHeight = $(this.$refs['attendanceTable']).height();
        tableHeight = Math.ceil(tableHeight);
        if (totalHeight >= tableHeight) {
          this.rowIndex = 0;
          return;
        }

        if (hasResize) {
          return;
        }

        var rowIndex = this.rowIndex + 1;
        if (rowIndex >= this.attendances.length) {
          rowIndex = 0;
        }
        this.rowIndex = rowIndex;
      },

      changeColIndex: function (hasResize) {
        var totalWidth = $(this.$refs['attendanceContent']).width();
        var tableWidth = $(this.$refs['attendanceTable']).width();
        tableWidth = Math.ceil(tableWidth);
        if (totalWidth >= tableWidth) {
          this.colIndex = 0;
          return;
        }

        if (hasResize) {
          return;
        }

        var colIndex = this.colIndex + 1;
        if (colIndex >= tableConfigs.length) {
          colIndex = 0;
        }
        this.colIndex = colIndex;
      },

      resetTable: function () {
        var rowIndex = this.rowIndex;
        var attendances = this.attendances;
        var newAttendances = attendances.slice(rowIndex);
        var lastAttendances = attendances.slice(0, rowIndex);
        newAttendances.pushArray(lastAttendances);
        this.attendanceList = newAttendances;

        var colIndex = this.colIndex;
        var configs = tableConfigs;
        var newConfigs = configs.slice(colIndex);
        var lastConfigs = configs.slice(0, colIndex);
        newConfigs.pushArray(lastConfigs);
        this.configs = newConfigs;
      },

      getTableStyle: function () {
        var zoom = this.zoom;
        var size = _.round(zoom * 14, 0);
        if (size < 12) {
          return {
            zoom: zoom
          };
        }
        return {
          fontSize: `${size}px`
        };
      },

      getRowClassName: function (attendance, config) {
        var field = config.field;
        if (['workshopPresonNum', 'todayOndutyPersonNum'].indexOf(field) !== -1) {
          return;
        }

        var value = attendance[field];
        if (value > 0){
          return 'error-text';
        }
        return;
      }
    },

    template: template
  };
}();
